<template>
  <nut-popup position="bottom" v-model:visible="visible" :style="{ height: '60%' }">
    <view class="address-popup">
      <view class="popup-header">
        <text class="title">选择收货地址</text>
        <text class="close" @tap="handleClose">×</text>
      </view>
      <scroll-view scroll-y class="address-list">
        <view
          class="address-item"
          v-for="address in addressList"
          :key="address.id"
          @tap="handleSelect(address)"
        >
          <view class="address-content">
            <view class="user-info">
              <text class="name">{{ address.name }}</text>
              <text class="phone">{{ address.phone }}</text>
              <text v-if="address.isDefault" class="default-tag">默认</text>
            </view>
            <view class="address-detail">
              {{ address.province }}{{ address.city }}{{ address.detail }}
            </view>
          </view>
          <view
            class="select-icon"
            v-if="modelValue && modelValue.id === address.id"
          >
            ✓
          </view>
        </view>
      </scroll-view>
      <view class="add-new-address" @tap="handleAddNew">
        <text class="add-icon">+</text>
        <text>添加新地址</text>
      </view>
    </view>
  </nut-popup>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits } from 'vue';

interface Address {
  id: number;
  name: string;
  phone: string;
  province: string;
  city: string;
  detail: string;
  isDefault: boolean;
}

const props = defineProps<{
  modelValue: Address | null;
  visible: boolean;
  addressList: Address[];
}>();

const emit = defineEmits<{
  'update:modelValue': [value: Address];
  'update:visible': [value: boolean];
  'add-new': [];
}>();

const handleSelect = (address: Address) => {
  emit('update:modelValue', address);
  emit('update:visible', false);
};

const handleClose = () => {
  emit('update:visible', false);
};

const handleAddNew = () => {
  emit('add-new');
};
</script>

<style lang="scss">
.address-popup {
  display: flex;
  flex-direction: column;
  height: 100%;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1px solid #f5f5f5;

    .title {
      font-size: 32rpx;
      font-weight: 500;
    }

    .close {
      font-size: 40rpx;
      color: #999;
    }
  }

  .address-list {
    flex: 1;
    overflow-y: auto;

    .address-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1px solid #f5f5f5;

      .address-content {
        flex: 1;

        .user-info {
          margin-bottom: 10rpx;

          .name {
            font-size: 30rpx;
            font-weight: 500;
            margin-right: 20rpx;
          }

          .phone {
            font-size: 28rpx;
            color: #666;
          }

          .default-tag {
            display: inline-block;
            font-size: 24rpx;
            color: #ff6034;
            border: 1px solid #ff6034;
            border-radius: 4rpx;
            padding: 0 10rpx;
            margin-left: 20rpx;
          }
        }

        .address-detail {
          font-size: 28rpx;
          color: #666;
          line-height: 1.4;
        }
      }

      .select-icon {
        color: #ff6034;
        font-size: 40rpx;
      }
    }
  }

  .add-new-address {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30rpx;
    border-top: 1px solid #f5f5f5;
    font-size: 30rpx;
    color: #ff6034;

    .add-icon {
      font-size: 36rpx;
      margin-right: 10rpx;
    }
  }
}
</style>